<template>
  <div>
    <div>共{{this.collections.length}}个课程</div>
    <div v-if="this.collectionstarts.length>0"><h1 style="font-size: 20px;margin-top: 20px">即将开始</h1></div>
    <ul class="course_type_list" >
      <li  v-for="collectionstart in this.collectionstarts ">
        <div class="box">
          <img :src="collectionstart.img_source" alt="">
          <div class="info">
            <h4><a href="#">{{collectionstart.name}}</a></h4>
            <span class="duration">共{{ Math.ceil((Date.parse(collectionstart.end)-Date.parse(collectionstart.start))/1000/60/60/24/7) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img :src="collectionstart.teacher.image" alt="">
              </li>
              <li class="username">{{collectionstart.teacher.nickname}}</li>
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{collectionstart.visitednum>10000?(((collectionstart.visitednum-collectionstart.visitednum%1000)/10000+'W')):(collectionstart.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{collectionstart.praisednum>10000?(((collectionstart.praisednum-collectionstart.praisednum%1000)/10000+'W')):(collectionstart.praisednum)}}</li>
            </ul>
          </div>
          <hr>
          <div class="dinfo">
            <span class="time">距开始还有</span>
            <span style="color: red;font-size: large">{{ Math.ceil((Date.parse(collectionstart.start)-new Date())/1000/60/60/24) }}天</span>
            <el-button type="danger" plain class="button" @click="coursecancel(collectionstart.id)">取消课程</el-button>
          </div>
        </div>
      </li>
    </ul>
    <div v-if="this.collectionings.length>0"><h1 style="font-size: 20px">进行中</h1></div>
    <ul class="course_type_list" >
      <li  v-for="collectioning in collectionings ">
        <div class="box">
          <img :src="collectioning.image" alt="">
          <div class="info">
            <h4><a href="#">{{collectioning.name}}</a></h4>
            <span class="duration">共{{ Math.ceil((Date.parse(collectioning.end)-Date.parse(collectioning.start))/1000/60/60/24/7) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img :src="collectioning.teacher.image" alt="">
              </li>
              <li class="username">{{collectioning.teacher.nickname}}</li>
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{collectioning.visitednum>10000?(((collectioning.visitednum-collectioning.visitednum%1000)/10000+'W')):(collectioning.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{collectioning.praisednum>10000?(((collectioning.praisednum-collectioning.praisednum%1000)/10000+'W')):(collectioning.praisednum)}}</li>
            </ul>
          </div>
          <hr>
          <div class="dinfo">
            <span class="ing">学习到：</span>
            <span class="section">第一章第二节</span>
            <el-button type="warning" plain class="button" @click="coursecontinue()">继续学习</el-button>
          </div>
        </div>
      </li>
    </ul>
    <div v-if="this.collectionends.length>0"><h1 style="font-size: 20px">已结束</h1></div>
    <ul class="course_type_list" >
      <li  v-for="collectionend in collectionends ">
        <div class="box">
          <img :src="collectionend.image" alt="">
          <div class="info">
            <h4><a href="#">{{collectionend.name}}</a></h4>
            <span class="duration">共{{ Math.ceil((Date.parse(collectionend.end)-Date.parse(collectionend.start))/1000/60/60/24/7) }}周</span>
          </div>
          <div class="tinfo">
            <ul class="nav_horizontal">
              <li class="uimg">
                <img :src="collectionend.teacher.image" alt="">
              </li>
              <li class="username">{{collectionend.teacher.nickname}}</li>
              <li class="visitedicon"><font-awesome-icon :icon="['far', 'eye']"></font-awesome-icon></li>
              <li class="visitednum">{{collectionend.visitednum>10000?(((collectionend.visitednum-collectionend.visitednum%1000)/10000+'W')):(collectionend.visitednum)}}</li>
              <li class="praisedicon"><font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon></li>
              <li class="praisednum">{{collectionend.praisednum>10000?(((collectionend.praisednum-collectionend.praisednum%1000)/10000+'W')):(collectionend.praisednum)}}</li>
            </ul>
          </div>
          <hr>
          <div class="dinfo">
            <span class="ing">已结束</span>
            <span class="">成绩：</span>
            <span class="">89</span>
            <span class="">分</span>
            <el-button type="success" plain class="button" @click="courselook()">查看</el-button>
          </div>
        </div>
      </li>
    </ul>
    <div v-if="this.collections.length===0"
         style="font-size: 25px;margin-left: 200px;margin-top: 100px ">您还没有收藏课程，请前往
      <a @click="collectionCourse()" style="color: burlywood">收藏课程</a>
      吧！</div>
  </div>
</template>

<script>
import router from '../../router';

export default {
  inject:['reload'],  //注入依赖
  name: "studentcoursecollection",
  data(){
    return{
      collections:[],
      collectionstarts:[],
      collectionings:[],
      collectionends:[]
    }
  },
  created() {
    this.axios.get(this.baseUrl+"course/findcollectioncourse")
    .then(res=>{
      console.log(res.data)
      this.collections = res.data.data;
      for (let i = 0; i < this.collections.length; i++) {
        if(Date.parse(this.collections[i].start)>new Date()){
          this.collectionstarts.push(this.collections[i])
        }else if(Date.parse(this.collections[i].end)<new Date()){
          this.collectionends.push(this.collections[i])
        }else {
          this.collectionings.push(this.collections[i])
        }
      }
      this.$store.commit('setCollectionstarts',this.collectionstarts);
    })
  },
  methods:{
    coursecancel:function(id){
      this.$confirm('确定要取消课程学习吗，该操作会删除当前课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      this.axios.delete(this.baseUrl+"user/delmycollectionbyuidcid",{params:{cid:id}})
        .then(res=>{
          console.log(res.data);
          for (let i = 0; i <this.collectionstarts.length ; i++) {
            if(this.collectionstarts.id === id){
              this.collectionstarts.splice(i,1);
            }
          }
          this.$store.commit('setCollectionstarts',this.collectionstarts);
          this.reload();
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    coursecontinue(){

    },
    courselook(){

    },
    collectionCourse(){
      router.push("/course");
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/course.css";
@import "../../assets/css/student.css";

</style>
